<template>
  <div class="person">
    <h2>一辆{{ car.brand }},价值{{ car.price }}</h2>
    <button @click="changePrice">修改汽车的价格</button>

    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeName">修改第一个游戏的名字</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref, reactive } from "vue";
//数据
let games = ref([{ id: '1', name: '王者荣耀' }, { id: '2', name: '原神' }])

let car = ref({
  brand: '奔驰',
  price: 100
})
//ref处理对象类型的时候，底层用reactive包了一层

console.log(car);//RefImpl {dep: Dep, __v_isRef: true, _value: Proxy(Object)}

let obj = reactive({ x: 999 })
console.log(obj);     //Proxy(Object) {x: 999}

function changePrice() {
  car.value.price += 100
}

function changeName() {
  games.value[0].name = 'qq飞车'
}
</script>

<style scoped>
.person {
  width: 100%;
  background-color: skyblue;
  box-shadow: 0px 1px 2px #ddd;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>
